<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>首页</title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <style>
		body{background-color: #262626}
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            max-width: 800px;
            margin: 0 auto;
        }
        .slide{
            width: 100%;
            min-height: 180px;
            overflow: hidden;
            position: relative;
  
        }
        .slide .img{
            overflow: hidden;
            position: absolute;
            transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
        }
        .slide .img img{
            width: calc(100% - 14px);
            height: calc(100% - 14px);
            margin: 7px;
        }
        .slide .img1{
            width: 40%;
            height: 40%;
            top: 30%;
            left: -50%;
            z-index: 1;
        }
        .slide .img2{
            width: 60%;
            height: 60%;
            top: 20%;
            left: -20%;
            z-index: 2;
        }
        .slide .img3{
            width: 80%;
            height: 80%;
            top: 10%;
            left: 10%;
            z-index: 3;
        }
        .slide .img4{
            width: 60%;
            height: 60%;
            top: 20%;
            left: 60%;
            z-index: 2;
        }
        .slide .img5{
            width: 40%;
            height: 40%;
            top: 30%;
            left: 110%;
            z-index: 1;
        }
        .slide-bt{
            position: absolute;
            left: 50%;
            bottom: 13%;
            z-index: 10;
        }
        .slide-bt span{
            width: 24px;
            height: 8px;
            background: #c9caca;
            float: left;
            margin: 5px;
            border-radius: 4px;
        }
        .slide .slide-bt .on{
            background: #ffd200;
        }
        button{
            width: 50px;
            margin: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="slide" class="slide" class="index-slide" alt="star">
        <!-- 轮播图片数量可自行增减 -->
        <div class="img"><img src="image/1.png"/></div>
        <div class="img"><img src="image/2.png"/></div>
        <div class="img"><img src="image/3.png"/></div>
        <div class="img"><img src="image/4.png"/></div>
        <div class="img"><img src="image/5.png"/></div>
        <div class="img"><img src="image/4.png"/></div>
        <div class="img"><img src="image/5.png"/></div>
        <div class="img"><img src="image/4.png"/></div>
        <div class="img"><img src="image/5.png"/></div>
        <div class="slide-bt"></div>
    </div>
<!--
    <button onclick="left()">上一页</button>
    <button onclick="right()">下一页</button>
-->
</div>

<script>
var autoLb = true;          //autoLb=true为开启自动轮播
var autoLbtime = 5;         //autoLbtime为轮播间隔时间（单位秒）
var touch = true;           //touch=true为开启触摸滑动
var slideBt = true;         //slideBt=true为开启滚动按钮


var slideNub;               //轮播图片数量

//窗口大小改变时改变轮播图宽高
$(window).resize(function(){
   $(".slide").height($(".slide").width()*0.56);
});


$(function(){
    $(".slide").height($(".slide").width()*0.56);
    slideNub = $(".slide .img").size();             //获取轮播图片数量
    for(i=0;i<slideNub;i++){
        $(".slide .img:eq("+i+")").attr("data-slide-imgId",i);
    }


    //根据轮播图片数量设定图片位置对应的class
    if(slideNub==1){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img3");
        }
    }
    if(slideNub==2){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img"+(i+3));
        }
    }
    if(slideNub==3){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img"+(i+2));
        }
    }
    if(slideNub>3&&slideNub<6){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img"+(i+1));
        }
    }
    if(slideNub>=6){
        for(i=0;i<slideNub;i++){
            if(i<5){
               $(".slide .img:eq("+i+")").addClass("img"+(i+1)); 
            }else{
                $(".slide .img:eq("+i+")").addClass("img5"); 
            }
        }
    }


    //根据轮播图片数量设定轮播图按钮数量
    if(slideBt){
        for(i=1;i<=slideNub;i++){
            $(".slide-bt").append("<span data-slide-bt='"+i+"' onclick='tz("+i+")'></span>");
        }
        $(".slide-bt").width(slideNub*34);
        $(".slide-bt").css("margin-left","-"+slideNub*17+"px");
    }


    //自动轮播
    if(autoLb){
        setInterval(function(){
        right();
    }, autoLbtime*1000);
    }


    if(touch){
        k_touch();
    }
    slideLi();
    imgClickFy();
})


//右滑动
function right(){
    var fy = new Array();
    for(i=0;i<slideNub;i++){
        fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
    }
    for(i=0;i<slideNub;i++){
        if(i==0){
            $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]);
        }else{
           $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]); 
        }
    }
    imgClickFy();
    slideLi();
}


//左滑动
function left(){
    var fy = new Array();
    for(i=0;i<slideNub;i++){
        fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
    }
    for(i=0;i<slideNub;i++){
        if(i==(slideNub-1)){
            $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]);
        }else{
           $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]); 
        }
    }
    imgClickFy();
    slideLi();
}


//轮播图片左右图片点击翻页
function imgClickFy(){
    $(".slide .img").removeAttr("onclick");
    $(".slide .img2").attr("onclick","left()");
    $(".slide .img4").attr("onclick","right()");
}


//修改当前最中间图片对应按钮选中状态
function slideLi(){
    var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
    $(".slide-bt span").removeClass("on");
    $(".slide-bt span[data-slide-bt="+slideList+"]").addClass("on");
}


//轮播按钮点击翻页
function tz(id){
    var tzcs = id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1);
    if(tzcs>0){
        for(i=0;i<tzcs;i++){
            setTimeout(function(){
              right();  
            },1);
        }
    }
    if(tzcs<0){
        tzcs=(-tzcs);
        for(i=0;i<tzcs;i++){
            setTimeout(function(){
              left();  
            },1);
        }
    }
    slideLi();
}


//触摸滑动模块
function k_touch() {
    var _start = 0, _end = 0, _content = document.getElementById("slide");
    _content.addEventListener("touchstart", touchStart, false);
    _content.addEventListener("touchmove", touchMove, false);
    _content.addEventListener("touchend", touchEnd, false);
    function touchStart(event) {
        var touch = event.targetTouches[0];
        _start = touch.pageX;
    }
    function touchMove(event) {
        var touch = event.targetTouches[0];
        _end = (_start - touch.pageX);
    }

    function touchEnd(event) {
        if (_end < -100) {
            left();
            _end=0;
        }else if(_end > 100){
            right();
            _end=0;
        }
    }
}

</script>
</body>
</html>